<template>
	<view class="notice_info_box" v-if="noticeInfo?.id">
		<Tips/>
		<view class="header">
			<view class="left">
				<Avatar :fileName="noticeInfo?.user.user_avatar" size="70rpx" />
			</view>
			<view class="right">
				<view class="name text_ellipsis">
					{{noticeInfo.user.nick_name_by_dormitory}}
				</view>
				<view class="time text_ellipsis">
					{{noticeInfo.createAt}}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title">
				{{noticeInfo.title}}
			</view>
			<view class="info">
				{{noticeInfo.content}}
			</view>
		</view>
		<view class="footer">
			<MyItem :url="`/pages/Dormitory/NoticeViewState/NoticeViewState?notice_id=${noticeInfo.id}`" marginRight="0rpx" name="成员阅读状态" iconFileName="noticeViewedState.png"/>
			<view class="handle" v-if="noticeInfo.user.user_id===user_store.userInfo.id">
				<MyButton :bgc="primary_hot_color" :clickFun="isDeleteNoticeFun">删除</MyButton>
			</view>
		</view>
		<MyModal :openModalFlag="modalIsDeleteNoticeFlag" :okFun="deleteNoticeFun">
			<template #title>
				确认删除吗
			</template>
			<template #content>
			</template>
		</MyModal>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {ref} from 'vue'
	
	import MyItem from '@/components/MyItem/MyItem.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import MyModal from '@/components/MyModal/MyModal.vue'
	import Tips from '@/components/Tips/Tips.vue'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		verifyIsLogin
	} from '@/hooks/verify.js'
	
	const user_store=userStore()
	
	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		primary_hot_color,
		primary_cool_color,
		primary_text_color,
		primary_border_color
	} = dynamicStyle_store.dormitoryStyle
	
	const noticeInfo=ref()
	const dormitoryAllId = uni.getStorageSync('homeData')
	
	const modalIsDeleteNoticeFlag=ref(0)
	//删除公告
	const deleteNoticeFun=async()=>{
		const {data,success} = await dormitoryModel.deleteNotice({},noticeInfo.value.id)
		if(success){
			uni.$emit('tips',data,'success')
			setTimeout(()=>{
				uni.navigateBack()
			},300)
		}
	}
	//是否确认删除公告
	const isDeleteNoticeFun=()=>{
		verifyIsLogin()
		const {user_id} = noticeInfo.value.user
		if(user_id!==user_store.userInfo.id){
			return
		}
		modalIsDeleteNoticeFlag.value=Math.random()
	}
	
	const init=async(id)=>{
		const {data,success} = await dormitoryModel.getNoticeInfo({
			notice_id:id,
			dormitory_id:dormitoryAllId.dormitory_id
		},dormitoryAllId.relation_id)
		if(success){
			noticeInfo.value=data[0]
		}
	}
	
	onLoad((opt)=>{
		const {notice_id} = opt
		notice_id && init(notice_id)
	})
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.notice_info_box{
		.header{
			display: flex;
			margin: 0 0 20rpx 0;
			padding: 20rpx;
			.left{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 10rpx;
			}
			.right{
				width: 100%;
				display: grid;
				grid-template-columns: repeat(2,1fr);
				.time{
					display: flex;
					justify-content: flex-end;
					color: #818284;
					font-size: 22rpx;
				}
				.name{
					margin-right: 10rpx;
					font-size: 25rpx;
					color: v-bind(primary_text_color);
					align-self: center;
				}
			}
		}
		.content{
			padding: 0 20rpx;
			.title{
				color: v-bind(primary_text_color);
				font-size: 40rpx;
				width: 100%;
			}
			.info{
				color: v-bind(primary_text_color);
				font-size: 30rpx;
				border-bottom: 1px solid v-bind(primary_border_color);
				padding-bottom: 20rpx;
			}
		}
		.footer{
			.handle{
				padding: 0 20rpx;
			}
		}
	}
</style>
